<template>
	<view class="sales">
		<view class="order_input public_sty"><uni-easyinput v-model="orderValue" placeholder="搜索我的订单" prefixIcon="search" placeholder-style="color:#C0C0C0" /></view>
		<view class="sales_con public_sty" v-for="(item, index) in saleslist" :key="index">
			<view class="sales_con_top">
				<view class="sales_shop_con">
					<view class="sales_shop_img"><image src="/static/uni.png" mode=""></image></view>
					<view class="">
						<text>{{ item.name }}</text>
						<uni-icons type="arrowright" color="#C0C0C0" size="11"></uni-icons>
					</view>
				</view>
				<view class="sales_status"><text>退货</text></view>
			</view>
			<view class="sales_content" v-for="(item, idx) in item.shoplist" :key="idx">
				<view class="content_img"><image :src="item.icon" mode=""></image></view>
				<view class="content_box">
					<view class="con_box_top">
						<text class="titles_letter" style="font-size: 28rpx; color: #333333;">{{ item.shopname }}</text>
						<view class="">
							<text style="font-size: 26rpx;">￥</text>
							<text>{{ item.pic }}</text>
						</view>
					</view>
					<view class="con_box_con">
						<text>药品规格</text>
						<text>x{{ item.shopNum }}</text>
					</view>
					<view class="con_box_bot">
						<text>退款：</text>
						<text>￥{{ item.refund }}</text>
					</view>
				</view>
			</view>
			<view class="sales_shop_status">
				<view class="sales_shop_box" v-if="item.saleStatus==0">
					<text class="sales_shop_sty" style="margin-right: 20rpx;">待商家处理</text>
					<text>商家将在</text>
					<text class="sales_shop_sty">1天23时59分</text>
					<text>内处理</text>
				</view>
				<view class="sales_shop_box" v-else-if="item.saleStatus==1">
					<text>退款成功 ￥22.9</text>
				</view>
			</view>
			<view class="sales_oper">
				<view class="">
					
				</view>
				<view class="oper_btn_sty oper_col" v-if="item.saleStatus==0" @click="revoke">
					<text>撤销申请</text>
				</view>
				<view class="oper_btn_sty oper_til" v-else-if="item.saleStatus==1">
					<text>售后评价</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup_box">
				<view class="popup_text">
					<text>您仅能主动撤销一次，撤销后将不能再主动撤销，且超出保障期后无法再次发起售后</text>
				</view>
				<view class="popup_btn">
					<view class="btn_sty" @click="cancel">
						<text>取消</text>
					</view>
					<view class="btn_sty btn_order" @click="confirm">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			saleslist: [
				{
					name: '华氏大药房',
					status: 2,
					payCheck: true,
					saleStatus:0,
					shoplist: [
						{
							icon: '/static/uni.png',
							shopname: '健力多氨糖软骨素钙片中间商你好',
							pic: 22.9,
							shopNum: 2,
							refund: 22.9,
						}
					]
				},
				{
					name: '华氏大药房',
					status: 5,
					payCheck: true,
					saleStatus:1,
					shoplist: [
						{
							icon: '/static/uni.png',
							shopname: '健力多氨糖软骨素钙片中间商你好',
							pic: 22.9,
							shopNum: 2,
							refund: 22.9,
						}
					]
				}
			]
		};
	},
	methods:{
		// 撤销申请
		revoke(){
			this.$refs.popup.open('center');
		},
		// 取消
		cancel(){
			this.$refs.popup.close()
		},
		// 确定
		confirm(){
			this.$refs.popup.close()
		}
	}
};
</script>

<style lang="scss" scoped>
.sales {
	padding: 30rpx;
	.order_input {
		border-radius: 18rpx;
		/deep/ .is-input-border {
			border: none;
		}
	}
}
.sales_con {
	margin-bottom: 24rpx;
	padding: 24rpx;
	.sales_con_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		.sales_shop_con {
			display: flex;
		}
		.sales_shop_img {
			display: flex;
			align-items: center;
			image {
				width: 50rpx;
				height: 44rpx;
			}
		}
		text {
			margin: 0rpx 10rpx;
		}
		.sales_status {
			color: #333333;
			font-size: 26rpx;
		}
	}
	.sales_content {
		display: flex;
		margin-bottom: 30rpx;
		.content_img {
			margin-right: 20rpx;
			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
		.content_box {
			.con_box_top,
			.con_box_con {
				display: flex;
				justify-content: space-between;
			}
		}
		.con_box_con {
			color: #999999;
			font-size: 28rpx;
			margin-bottom: 26rpx;
		}
		.con_box_bot{
			color: #333333;
			font-size: 28rpx;
		}
	}
	.sales_shop_status{
		background: #F9F9F9;
		border-radius: 20rpx;
		font-size: 28rpx;
		padding: 20rpx 0rpx;
		.sales_shop_box{
			text-align: right;
			padding: 0rpx 28rpx;
		}
		.sales_shop_sty{
			color: #00B359;
		}
	}
	.sales_oper{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
}
.popup_box{
	width: 630rpx;
	background-color: #ffffff;
	padding-top: 52rpx;
	font-size: 14px;
	margin: 0px 60rpx;
	border-radius: 16rpx;
	.popup_text{
		padding: 0px 48rpx;
		font-size: 28rpx;
		color: #353535;
	}
	.popup_btn{
		margin-top: 48rpx;
		border-top: 1rpx solid rgba(0,0,0,0.10);
		display: flex;
		.btn_sty{
			width: 288rpx;
			text-align: center;
			color: #666666;
			padding: 30rpx 0rpx;
		}
		.btn_order{
			border-left: 1rpx solid rgba(0,0,0,0.10);
			color: #00B359;
		}
	}
}
</style>
